feedback-vos 1.0.36 → 1.0.37

package/dist/index.js

@@ -18,30 +18,30 @@ var thoughtImageUrl = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0
 // src/lib/theme.ts
 function getThemeClasses(theme) {
   return {
-    // Background colors - light mode is now softer (gray-50 instead of white)
-    bgPrimary: theme === "dark" ? "bg-zinc-900" : "bg-gray-50",
-    bgSecondary: theme === "dark" ? "bg-zinc-800" : "bg-gray-100",
-    bgTertiary: theme === "dark" ? "bg-zinc-700" : "bg-gray-200",
-    bgHover: theme === "dark" ? "hover:bg-zinc-600" : "hover:bg-gray-200",
-    bgHoverSecondary: theme === "dark" ? "hover:bg-zinc-700" : "hover:bg-gray-200",
+    // Background colors - light mode uses white for better clarity
+    bgPrimary: theme === "dark" ? "bg-zinc-900" : "bg-white",
+    bgSecondary: theme === "dark" ? "bg-zinc-800" : "bg-gray-50",
+    bgTertiary: theme === "dark" ? "bg-zinc-700" : "bg-gray-100",
+    bgHover: theme === "dark" ? "hover:bg-zinc-600" : "hover:bg-gray-100",
+    bgHoverSecondary: theme === "dark" ? "hover:bg-zinc-700" : "hover:bg-gray-50",
     // Text colors
     textPrimary: theme === "dark" ? "text-zinc-100" : "text-gray-900",
     textSecondary: theme === "dark" ? "text-zinc-300" : "text-gray-700",
     textTertiary: theme === "dark" ? "text-zinc-400" : "text-gray-600",
     textMuted: theme === "dark" ? "text-neutral-400" : "text-gray-500",
-    // Border colors
-    borderPrimary: theme === "dark" ? "border-zinc-700" : "border-gray-300",
+    // Border colors - stronger borders in light mode for better definition
+    borderPrimary: theme === "dark" ? "border-zinc-700" : "border-gray-200",
     borderSecondary: theme === "dark" ? "border-zinc-600" : "border-gray-300",
     borderHover: theme === "dark" ? "hover:border-zinc-500" : "hover:border-gray-400",
     // Canvas/Editor background
-    canvasBg: theme === "dark" ? "bg-zinc-900" : "bg-gray-200",
+    canvasBg: theme === "dark" ? "bg-zinc-900" : "bg-gray-100",
     // Overlay
     overlay: theme === "dark" ? "bg-black/80" : "bg-black/60",
     // Focus ring offset
-    focusRingOffset: theme === "dark" ? "focus:ring-offset-zinc-900" : "focus:ring-offset-gray-50",
-    // Button variants
-    buttonSecondary: theme === "dark" ? "bg-zinc-800 hover:bg-zinc-700 text-zinc-100" : "bg-gray-200 hover:bg-gray-300 text-gray-900",
-    buttonTertiary: theme === "dark" ? "bg-zinc-700 hover:bg-zinc-600 text-zinc-100" : "bg-gray-300 hover:bg-gray-400 text-gray-900",
+    focusRingOffset: theme === "dark" ? "focus:ring-offset-zinc-900" : "focus:ring-offset-white",
+    // Button variants - clearer distinction in light mode
+    buttonSecondary: theme === "dark" ? "bg-zinc-800 hover:bg-zinc-700 text-zinc-100" : "bg-white hover:bg-gray-50 text-gray-900 border border-gray-200",
+    buttonTertiary: theme === "dark" ? "bg-zinc-700 hover:bg-zinc-600 text-zinc-100" : "bg-gray-50 hover:bg-gray-100 text-gray-900 border border-gray-200",
     // Icon colors - make icons more visible (darker for better contrast)
     iconColor: theme === "dark" ? "text-zinc-100" : "text-gray-900"
   };
@@ -114,20 +114,20 @@ function FeedbackTypeStep({ onFeedbackTypeChanged, language, theme }) {
   const feedbackTypes = getFeedbackTypes(language);
   const themeClasses = getThemeClasses(theme);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between w-full gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-lg md:text-xl leading-6 ${themeClasses.textPrimary}`, children: t.form.header }),
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `flex items-center justify-between w-full gap-2 ${theme === "light" ? "pb-3 mb-2 border-b border-gray-200" : "pb-2"}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-lg md:text-xl leading-6 font-semibold ${themeClasses.textPrimary}`, children: t.form.header }),
       /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { title: t.form.closeButton, theme })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex py-6 md:py-8 gap-2 md:gap-2 w-full justify-center md:justify-start flex-wrap", children: Object.entries(feedbackTypes).map(([key, value]) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
-          className: `${themeClasses.bgSecondary} rounded py-4 md:py-5 flex-1 min-w-[80px] md:w-24 flex flex-col items-center gap-2 border-2 border-transparent hover:border-brand-500 focus:border-brand-500 focus:outline-none transition-colors`,
+          className: `${themeClasses.bgSecondary} rounded-lg py-4 md:py-5 flex-1 min-w-[80px] md:w-24 flex flex-col items-center gap-2 border-2 ${theme === "light" ? "border-gray-200" : "border-transparent"} hover:border-brand-500 focus:border-brand-500 focus:outline-none transition-all shadow-sm hover:shadow-md ${theme === "light" ? "hover:bg-white" : ""}`,
           type: "button",
           onClick: () => onFeedbackTypeChanged(key),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("img", { src: value.image.source, alt: value.image.alt, className: "w-5 h-5 md:w-6 md:h-6" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs md:text-sm text-center ${themeClasses.textPrimary}`, children: value.title })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs md:text-sm text-center font-medium ${themeClasses.textPrimary}`, children: value.title })
           ]
         },
         key
@@ -387,7 +387,13 @@ function ScreenshotButton({
   const themeClasses = getThemeClasses(theme);
   async function handleTakeScreenshot() {
     setIsTakenScreenShot(true);
-    const canvas = await html2canvas__default.default(document.querySelector("html"), {
+    const canvas = await html2canvas__default.default(document.body, {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      scrollX: -window.scrollX,
+      scrollY: -window.scrollY,
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight,
       ignoreElements: (element) => {
         return element.hasAttribute("data-feedback-widget") || element.closest("[data-feedback-widget]") !== null;
       }
@@ -1250,7 +1256,7 @@ function FeedbackContentStep({
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `relative w-full ${theme === "light" ? "pb-3 mb-3 border-b border-gray-200" : "pb-2 mb-2"}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -1260,7 +1266,7 @@ function FeedbackContentStep({
           children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.ArrowLeft, { weight: "bold", className: "w-5 h-5 md:w-5 md:h-5" })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-lg md:text-xl leading-6 flex items-center gap-2 pl-10 md:pl-12 pr-10 md:pr-12 ${themeClasses.textPrimary}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-lg md:text-xl leading-6 flex items-center gap-2 pl-10 md:pl-12 pr-10 md:pr-12 font-semibold ${themeClasses.textPrimary}`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
@@ -1278,10 +1284,10 @@ function FeedbackContentStep({
         "textarea",
         {
           className: `w-full min-h-[100px] md:min-h-[112px] text-sm 
-        ${themeClasses.textPrimary} border-2 border-brand-500 bg-transparent rounded-md p-2 md:p-3
+        ${themeClasses.textPrimary} border-2 ${theme === "light" ? "border-gray-300" : "border-brand-500"} ${theme === "light" ? "bg-gray-50" : "bg-transparent"} rounded-md p-2 md:p-3
         ${theme === "dark" ? "placeholder:text-zinc-400" : "placeholder:text-gray-500"}
         focus:border-brand-500 focus:ring-brand-500 focus:ring-1 resize-none focus:outline-none
-          ${theme === "dark" ? "scrollbar-thumb-zinc-700" : "scrollbar-thumb-gray-400"} scrollbar-track-transparent scrollbar-thin`,
+          ${theme === "dark" ? "scrollbar-thumb-zinc-700" : "scrollbar-thumb-gray-400"} scrollbar-track-transparent scrollbar-thin transition-colors`,
           placeholder: t.content.placeholder,
           onChange: (e) => setComment(e.target.value)
         }
@@ -1326,13 +1332,13 @@ function FeedbackSuccessStep({ onFeedbackRestartRequest, language, theme }) {
   const t = getTranslations(language);
   const themeClasses = getThemeClasses(theme);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { title: t.form.closeButton, theme }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("header", { className: `flex items-center justify-end w-full ${theme === "light" ? "pb-3 mb-2 border-b border-gray-200" : "pb-2"}`, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { title: t.form.closeButton, theme }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center py-8 md:py-10 w-full max-w-[304px] px-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "41", height: "40", viewBox: "0 0 41 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-10 h-10 md:w-[41px] md:h-[40px]", children: [
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M38.5 34C38.5 36.209 36.709 38 34.5 38H6.5C4.291 38 2.5 36.209 2.5 34V6C2.5 3.791 4.291 2 6.5 2H34.5C36.709 2 38.5 3.791 38.5 6V34Z", fill: "#77B255" }),
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M31.78 8.36202C30.624 7.61102 29.076 7.94002 28.322 9.09802L17.436 25.877L12.407 21.227C11.393 20.289 9.81103 20.352 8.87403 21.365C7.93703 22.379 7.99903 23.961 9.01303 24.898L16.222 31.564C16.702 32.009 17.312 32.229 17.918 32.229C18.591 32.229 19.452 31.947 20.017 31.09C20.349 30.584 32.517 11.82 32.517 11.82C33.268 10.661 32.938 9.11302 31.78 8.36202Z", fill: "white" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-lg md:text-xl mt-2 text-center ${themeClasses.textPrimary}`, children: t.success.message }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-lg md:text-xl mt-2 text-center font-medium ${themeClasses.textPrimary}`, children: t.success.message }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -1379,7 +1385,7 @@ function WidgetForm({ integration, githubConfig, language, theme }) {
     setFeedbackSent(false);
     setFeedbackType(null);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${themeClasses.bgPrimary} p-3 md:p-4 relative rounded-2xl mb-4 flex flex-col items-center shadow-lg w-[calc(100vw-2rem)] md:w-auto md:min-w-[384px] max-w-md`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${themeClasses.bgPrimary} p-3 md:p-4 relative rounded-2xl mb-4 flex flex-col items-center ${theme === "light" ? "shadow-xl border border-gray-200" : "shadow-lg"} w-[calc(100vw-2rem)] md:w-auto md:min-w-[384px] max-w-md`, children: [
     feedbackSent ? /* @__PURE__ */ jsxRuntime.jsx(FeedbackSuccessStep, { onFeedbackRestartRequest: handleRestartFeedback, language, theme }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !feedbackType ? /* @__PURE__ */ jsxRuntime.jsx(FeedbackTypeStep, { onFeedbackTypeChanged: setFeedbackType, language, theme }) : /* @__PURE__ */ jsxRuntime.jsx(
       FeedbackContentStep,
       {